<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .basic {
            width: 300px;
            height: 100px;
            color: #000;
            border: 2px solid #000;
            background-color: #fff;
        }

        .happy {
            background: linear-gradient(to bottom, #00b7ff, #ffff00);
        }

        .sad {
            background: ;
        }

        .normal {}

        .atguigu1 {}

        .atguigu2 {
            background-color: red;
            font-size: 30px;
        }

        .atguigu3 {
            border-radius: 20px;
        }
    </style>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 绑定class样式：字符串写法，适用于：样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br />
        <!-- 绑定class样式：数组写法，适用于：要绑定的样式个数不确定，名字也不确定 -->
        <div class="basic" :class="classArr">{{name}}</div><br />
        <div class="basic" :class="[a,b,c]">{{name}}</div><br />
        <!-- 绑定class样式：对象写法，适用于：要绑定的样式个数确定，名字也确定，但要动态决定要不要 -->
        <div class="basic" :class="classObj">{{name}}</div><br />
        <!-- 绑定style样式：对象写法 -->
        <div class="basic" :style="styleObj">{{name}}</div><br />
        <!-- 绑定style样式：数组写法 -->
        <div class="basic" :style="styleArr">{{name}}</div><br />
    </div>
    <script>
        Vue.config.productionTip = false
        const vm = new Vue({
            data() {
                return {
                    name: "开玩笑",
                    mood: 'normal',
                    classArr: ['atguigu1', 'atguigu2', 'atguigu3'],
                    a: 'atguigu1',
                    b: 'atguigu2',
                    c: 'atguigu3',
                    classObj: {
                        atguigu1: false,
                        atguigu2: false,
                        atguigu3: false
                    },
                    styleObj: {
                        fontSize: '40px'
                    },
                    styleArr: [
                        {
                            fontSize: '40px'
                        }, {
                            color: '#333'
                        }
                    ]
                }
            },
            methods: {
                changeMood() {
                    const arr = ['happy', 'sad', 'normal'];
                    this.mood = arr[Math.floor(Math.random() * 3)]
                }
            },
        })
        vm.$mount('#app')
    </script>
</body>

</html>